<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Демонстрация - Компонент - Mylo.Slider</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <meta name="author" content="Mylo Creative - http://creative.mylo.bg" />
    <meta name="distribution" content="Global" />
    <meta name="robots" content="index, follow, all" /> 
    <meta name="GOOGLEBOT" content="index, follow, all" />
    <meta name="audience" content="all" />
    
    <link rel="shortcut icon" href="http://creative.mylo.bg/assets/favicon.ico" />
    
    <script type="text/javascript" src="./assets/js/mootools-1.2-core-yc.js"></script>
    <!-- uncompressed: <script type="text/javascript" src="./assets/js/mootools-1.2-core-nc.js"></script> -->
    <script type="text/javascript" src="./assets/js/mootools-1.2-more.js"></script> 
    <script type="text/javascript" src="./assets/js/mylo/slider/mylo.slider.js"></script> 
    
    <!-- CSS код - имплементация за хоризонталния layout -->
    <style>
        #slideMe, #next, #prev {
            /**
                малко по специфична имплементация, просто искаме бутоните за напред и назад
                да бъдат от двете страни а не отдолу и отгоре :)
            */
            float:left; 
        }
        #slideMe, #slideMe ul li {
            /**
                Друго важно, е всички елементи в слайдъра да са с еднаква широчина/височина.
            */
            width:120px;
            height:50px;
        }
    </style>
    <!-- край на CSS кода -->

    <!-- CSS код - имплементация за хоризонталния layout -->
    <style>
        #slideMe2, #slideMe2 ul li {
            /**
                Друго важно, е всички елементи в слайдъра да са с еднаква широчина/височина.
            */
            width:120px;
            height:50px;
        }
    </style>
    <!-- край на CSS кода -->
    
                                        
    <!-- CSS код - имплементация за дебъг логъра -->
    <style>
        #logger {
            width:500px;
            height:300px;
            clear:both;
        }
    </style>
    <!-- край на CSS кода -->
    
    </head>
    <body>
    
    <!-- Хоризонтална имплементация -->
        <h2>Хоризонтална имплементация</h2>
        <!-- HTML код -->
        <a href="javascript:;" id="prev">назад</a>
        <div id="slideMe">
            <!-- Скрипта използва списъци за да създаде слайдъра, за това 
            тук е мястото на UL елемента, които по-късно се превръща в 
            wrapper на невидимата част от другите елементи. -->
            <ul>
                <li>Текст 1</li>
                <li>Текст 2</li>
                <li>Текст 3</li>
                <li>Текст 4</li>
                <li>Текст 5</li>
            </ul>
        </div>
        <a href="javascript:;" id="next">напред</a>
        <!-- Край на HTML кода -->

        <!-- JavaScript код -->
        <script type="text/javascript">
        var demoSlider;
        window.addEvent("domready",function() {
            demoSlider = new mylo.slider($('slideMe'),{
                prevButton:$('prev'),
                nextButton:$('next'),                         
                inactiveOpacity:0.4
            });
            /**
                Както се забелязва, сме пропуснали опцията "layout", защото по подразбиране тя е
                със стойност: mylo.slider.constants.LAYOUT_VERTICAL      
            */
        });
        </script>
        <!-- край на JavaScript кода -->
    <!-- край на Хоризонталната имплементация -->
     
    <hr style="clear:both;"/>

    <!-- Вертикална имплементация -->
        <h2>Вертикална имплементация</h2>
        <!-- HTML код -->
        <a href="javascript:;" id="prev2">назад</a>
        <div id="slideMe2">
            <!-- Скрипта използва списъци за да създаде слайдъра, за това 
            тук е мястото на UL елемента, които по-късно се превръща в 
            wrapper на невидимата част от другите елементи. -->
            <ul>
                <li>Текст 1</li>
                <li>Текст 2</li>
                <li>Текст 3</li>
                <li>Текст 4</li>
                <li>Текст 5</li>
            </ul>
        </div>
        <a href="javascript:;" id="next2">напред</a><br/>
        <!-- Край на HTML кода -->

        <!-- JavaScript код -->
        <script type="text/javascript">
        var demoSlider2;                          
        window.addEvent("domready",function() {
            demoSlider2 = new mylo.slider($('slideMe2'),{
                prevButton:$('prev2'),
                nextButton:$('next2'),                         
                inactiveOpacity:0.4,
                layout:mylo.slider.constants.LAYOUT_VERTICAL
            });
            //Пример за "събития" (Events)    
            demoSlider2.addEvent("init",function() {
                $('logger').set("text","Вертикалният слайдър беше инициализиран.\n"+$("logger").get('text'));
            });
            demoSlider2.addEvent("beforeSlide",function(count) {
                $('logger').set("text","Започва слайд със "+count+" елемента.\n"+$("logger").get('text'));
            });
            demoSlider2.addEvent("afterSlide",function(activeElement) {
                $('logger').set("text","Слайда завърши и в момента видим елемент е: " +this.activeElement + "\n"+$("logger").get('text'));
            });
        });
        </script>          
        <!-- край на JavaScript кода -->
     <!-- край на Вертикалната имплементация -->
     
     <hr style="clear:both;" />
     <!-- Прост логър -->
     <h2>Логър</h2>
     <textarea id="logger" readonly=1></textarea>
     <!-- Край на логъра -->
    </body>
</html>